import './roleNew.scss'
import '../../static/font/iconfont.css'
import { Form, Input, Button, Select, Image, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { Option } = Select;
const { confirm } = Modal;
const layout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};
const RoleNew = ({ setState }) => {
    //返回页面
    const backCar = () => {
        setState(1)
    }
    const quxiao = () => {
        confirm({
            icon: <ExclamationCircleOutlined />,
            content: '您确定离开此页面吗？',
            cancelText: '取消',
            okText: '确定',
            onOk() {
                //   console.log('OK');
                backCar()
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    const [form] = Form.useForm();
    const onFinish = (values) => {
        console.log(values);
    };

    return (
        <div className="xinzeng">
            <div>
                <div className='tit'>
                    <div>
                        <div>
                            <div></div>
                            <div>车辆信息新增</div>
                        </div>
                    </div>
                    <div>
                        <span class="iconfont icon-a-16guanbi" onClick={backCar}></span>
                    </div>
                </div>
                <hr></hr>
                <div className='content'>
                    <div>
                        <p>车主基本信息:</p>
                        <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                            <Form.Item
                                name="name"
                                label="车主姓名"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name="tel"
                                label="联系方式"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input disabled />
                            </Form.Item>
                            <Form.Item
                                name="sex"
                                label="人员性别"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Select
                                    placeholder=""
                                    allowClear
                                    disabled
                                >
                                </Select>
                            </Form.Item>
                            <Form.Item
                                name="danwei"
                                label="单位名称"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input disabled />
                            </Form.Item>
                            <Form.Item
                                name="lou"
                                label="所属楼宇"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Select
                                    placeholder=""
                                    allowClear
                                    disabled
                                >
                                </Select>
                            </Form.Item>
                            <Form.Item
                                name="room"
                                label="房间名称"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input disabled />
                            </Form.Item>
                            <Form.Item
                                name="face"
                                label="人脸照片"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Image
                                    width={100}
                                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                />
                            </Form.Item>
                            {/* <Form.Item >
                                <Button type="primary" htmlType="submit">
                                    Submit
                                </Button>
                            </Form.Item> */}
                        </Form>
                    </div>
                    <div>
                        <p>车辆基本信息:</p>
                        <div>
                            <div>
                                <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                                    <Form.Item
                                        name="carType"
                                        label="车辆类型"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <Select
                                            // placeholder=""
                                            allowClear
                                            defaultValue='临时车'
                                        >
                                            <Option value="linshi">临时车</Option>
                                            <Option value="baoyue">包月车</Option>
                                            <Option value="yuanqu">园区车</Option>
                                        </Select>
                                    </Form.Item>
                                    <Form.Item
                                        name="carBrand"
                                        label="车辆品牌"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <Input />
                                    </Form.Item>
                                    <Form.Item
                                        name="startTime"
                                        label="开始时间"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <Input />
                                    </Form.Item>
                                    {/* <Form.Item >
                                <Button type="primary" htmlType="submit">
                                    Submit
                                </Button>
                            </Form.Item> */}
                                </Form>
                            </div>
                            <div>
                                <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                                    <Form.Item
                                        name="carNum"
                                        label="车辆号码"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <Input></Input>
                                    </Form.Item>
                                    <Form.Item
                                        name="carModel"
                                        label="车辆型号"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <Input />
                                    </Form.Item>
                                    <Form.Item
                                        name="endTime"
                                        label="结束时间"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <Input />
                                    </Form.Item>
                                    <Form.Item {...tailLayout}>
                                        <div className='btn'>
                                            <Button type="primary" htmlType="submit">
                                                保存
                                            </Button>
                                            <Button onClick={quxiao}>
                                                取消
                                            </Button>
                                        </div>

                                    </Form.Item>
                                </Form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>)
}
export default RoleNew